folderIcon: Add visual drag-over feedback

WIP: This is not exactly what was discussed on IRC, but
it's looking alright as a first iteration. Design feedback
welcomed.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/664

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 5e377df1536dfaf35a1a73058dfef2c549b56145..8731ba48d973e1c4281f2b6a8c77b3efcffcfdb8 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1514,6 +1514,9 @@ StScrollBar {
       border-image: none;
       background-image: none;
     }
+    &:drop .overview-icon {
+      background-color: transparentize($selected_bg_color,.15);
+    }
     &:active .overview-icon,
     &:checked .overview-icon {
       background-color: transparentize(darken($osd_bg_color,10%), 0.5);

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 6b3095eae05d21af4b3303ade52a2872766e1552..e283125d69d25f840a1c37dc4547aee6b8c90902 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1377,11 +1377,29 @@ var FolderIcon = class FolderIcon {
     }
 
     _onDragBegin() {
+        this._dragMonitor = {
+            dragMotion: this._onDragMotion.bind(this),
+        };
+        DND.addDragMonitor(this._dragMonitor);
+
         this._parentView.inhibitEventBlocker();
     }
 
+    _onDragMotion(dragEvent) {
+        let target = dragEvent.targetActor;
+
+        if (!this.actor.contains(target) || !this._canAccept(dragEvent.source))
+            this.actor.remove_style_pseudo_class('drop');
+        else
+            this.actor.add_style_pseudo_class('drop');
+
+        return DND.DragMotionResult.CONTINUE;
+    }
+
     _onDragEnd() {
+        this.actor.remove_style_pseudo_class('drop');
         this._parentView.uninhibitEventBlocker();
+        DND.removeDragMonitor(this._dragMonitor);
     }
 
     _canAccept(source) {